import React from 'react';
import { Tooltip } from 'antd';
import { history } from 'umi'

import styles from './ScaleBar.less';

const isValid = (style = {}) => parseInt(style.width, 10);

const ScaleBar = ({ scaleData }) => (
    <div className={styles.barContainer}>
        {scaleData.map(
            item =>
                isValid(item.style) && (
                    <Tooltip key={item.text} title={item.tip}>
                        <div
                            className={styles.barItem}
                            style={item.style}
                            onClick={() => {
                                if (item.link) {
                                    history.push(item.link);
                                }
                            }}
                        >
                            {item.text}
                        </div>
                    </Tooltip>
                )
        )}
    </div>
);

export default ScaleBar;
